<FreeTable ref="freeTable" :pageData="page" :showRowFooter="true" @search="search">
    <template #header>
        <div class="column" style="flex:auto;">审批单信息</div>
        <div class="column w140">状态</div>
        <div class="column w140">操作</div>
    </template>
    <template #rowHeader="{row}">
        <p>{{ row.title }} </p>
        <span>{{ row.createTime }}</span>
    </template>
    <template #rowContent="{row}">
        <div class="column" style="flex:auto;">
            <div class="row_content">
                <div v-for="(content,index) in JSON.parse(row.summary)" :key="index">
                    <span>{{ content.title }}：</span>
                    <span>{{ content.value }}</span>
                </div>
            </div>
        </div>
        <div class="column w140">
            {{ row.stateDisplay }}
        </div>
        <div class="column w140">
            <div style="display: flex;flex-direction: column;align-items: flex-start;">
                <el-button plain type="text" size="small" @click="handleViewDetail(row)">查看详情</el-button>
                <el-button plain type="text" size="small" @click="handleCancel(row)" style="color:red">撤销审批</el-button>
                <el-button plain type="text" size="small" @click="handleReStart(row)">重新发起</el-button>
            </div>
        </div>
    </template>
    <template #rowFooter="{row}">
        <span v-if="row.wfProcessId">审批编号：
            <TableBpmProcess :spNo="row.wfProcessId" :spId="row.wfProcessId" />
        </span>
    </template>
</FreeTable>

import FreeTable from '@/views/components/freeTable'

.free-table:deep {
    .column {
        border-right: 1px solid #f6f6f6;
        width: 120px;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.row_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 5px;
}

.el-button + .el-button {
    margin-left: 0;
}

.w140 {
    width: 140px;
}